<template>
  <div>
    <v-card
      flat
      outlined
      tile
      class='mb-2'
    >
      <v-card-title class='text-h6'>
        基础设置
      </v-card-title>
      <v-card-text class='text--primary text-center'>
      <v-row >
        <v-col>
          团队名称
        </v-col>
        <v-col>
          <v-text-field
            dense
            label='名称'
            v-model='groupBaseSettings.name'
            :rules='[rules.required]'
            clearable
          />
        </v-col>
        <v-col>
        </v-col>
      </v-row>
        <v-row>
          <v-col>团队描述</v-col>
          <v-col>
            <v-text-field
              clearable
              dense
              label='描述'
              :rules='[rules.required]'
              v-model='groupBaseSettings.des'/>
          </v-col>
          <v-col>
            <v-btn
              color='primary'
              plain
              @click='updateGroup'
            >
              保存
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <v-card
      flat
      outlined
      tile>
      <v-card-title class='text-h6 primary--text'>
        <v-icon class='quaternary--text'>
          mdi-alert
        </v-icon>
        高危设置
      </v-card-title>
      <v-card-text class='text-center text--primary'>
        <v-row>
          <v-col>
            移交
          </v-col>
          <v-col class='text--secondary'>
            将团队的所有者权限移交给其他成员
          </v-col>
          <v-col>
            <v-btn
              color='primary'
              plain
              @click='transferDialog=true'
            >
              移交
            </v-btn>
          </v-col>
        </v-row>
        <v-row>
          <v-col>团队描述</v-col>
          <v-col class='text--secondary'>
            务必谨慎，解散后无法找回
          </v-col>
          <v-col class='text-center'>
            <v-btn
              color='primary'
              plain
              @click='dissolutionDialog=true'
            >
              解散
            </v-btn>
          </v-col>
        </v-row>
      </v-card-text>
    </v-card>
    <!--    移交团队对话框-->
    <v-dialog
      v-model="transferDialog"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>填写接收人</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row justify='center' align='center' class='mt-3'>
            <h3>
              <v-icon x-large>mdi-account</v-icon>
            </h3>
          </v-row>
          <search-user-input
            :user='user'
            :model-user-id='transferUserId'
            @inputOnChange='inputOnChange'
            @enableBtn='enableBtn'
          />
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <progress-button
            :text="true"
            :loading='loading'
            :disabled='btnDisable'
            progressColor="primary"
            color="primary"
            @click="transfer"
            title="确定移交">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
<!--    解散团队对话框-->
    <v-dialog
      v-model="dissolutionDialog"
      transition="dialog-bottom-transition"
      max-width="600px"
    >
      <v-card>
        <v-card-title>
          <span class='text-h5'>危险提醒</span>
        </v-card-title>
        <v-divider/>
        <v-card-text>
          <v-row justify='center' align='center' class='mt-3'>
            <h3>
              <v-icon x-large>mdi-tray-remove</v-icon>
            </h3>
          </v-row>
          <v-row justify='center'>
            解散团队'<strong> {{group.GROUP_NAME}} </strong>'后,将无法恢复!
          </v-row>
          <v-row class='pt-3'>
            <v-col align-self='center'>
              请输入团队名以继续操作:
            </v-col>
            <v-col>
              <v-text-field
                dense
                label='团队名'
                v-model='confirmText'
              />
            </v-col>
            <v-col>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <progress-button
            :text="true"
            :loading='loading'
            :disabled='dissolutionBtnDisable'
            progressColor="primary"
            color="primary"
            @click="dissolution"
            title="确定解散">
          </progress-button>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
  import SearchUserInput from '@/components/common/SearchUserInput'
  import ProgressButton from '@/components/common/ProgressButton'
  import groupApi from '@/api/apiPath/groupApi'
  import userApi from '@/api/apiPath/userApi'

  export default {
    name: 'GroupSetting',
    props: {
      group: {
        type: Object
      },
      user: {
        type: Object
      }
    },
    components: {
      SearchUserInput,
      ProgressButton
    },
    created() {
      this.groupBaseSettings = {
        name: this.group.GROUP_NAME,
        des: this.group.DESCRIPTION
      }
    },
    data() {
      return {
        groupBaseSettings: {},
        dissolutionDialog: false,
        dissolutionBtnDisable: true,
        confirmText: '',
        transferDialog: false,
        transferUserId: '',
        loading: false,
        btnDisable: true,
        foundUser: null,
        rules: {
          required: value => !!value || '必须要填写!.'
        }
      }
    },
    methods: {
      async updateGroup() {
        try {
          const { data: result } = await groupApi.updateGroup({
            groupId: this.group.ID,
            ...this.groupBaseSettings
          })
          this.$toast.success(result)
          this.$emit('freshGroup')
        } catch (e) {
          this.$toast.error(e)
        }
      },
      enableBtn(val) {
        console.log(val)
        this.btnDisable = val
      },
      inputOnChange(val) {
        this.transferUserId = val
      },
      async transfer() {
        this.loading = true
        try {
          const { data: result } = await groupApi.transferGroup({
            groupId: this.group.ID,
            userId: this.transferUserId
          })
          this.$toast.success(result)
          this.loading = false
          this.$emit('freshGroup')
        } catch (e) {
          this.$toast.error(e)
        }
      },
      async dissolution() {
        try {
          const { data: result } = await groupApi.dissolutionGroup({
            groupId: this.group.ID
          })
          this.$toast.success(result)
          this.$emit('freshGroup')
        } catch (e) {
          this.$toast.error(e)
        }
      }
    },
    watch: {
      confirmText: {
        handler(val) {
          if (val === this.group.GROUP_NAME) {
            this.dissolutionBtnDisable = false
          }
        }
      },
      dissolutionDialog: {
        handler(val) {
          if (val === false) {
            this.confirmText = ''
          }
        }
      }
    }
  }
</script>

<style scoped>

</style>
